<div class="page page-charts">

    <section class="row ui-section" data-ng-controller="EasyPieChartCtrl">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Easy Pie Chart</h2>
        </div>
        <div class="col-md-12">

            <div class="row">
                <div class="col-sm-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <div easypiechart options="easypiechart.options" percent="easypiechart.percent" class="easypiechart">
                                <span class="pie-percent" ng-bind="easypiechart.percent"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <div easypiechart options="easypiechart2.options" percent="easypiechart2.percent" class="easypiechart">
                                <span class="pie-percent" ng-bind="easypiechart2.percent"></span>
                            </div>
                        </div>
                    </div>            
                </div>

                <div class="col-sm-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <div easypiechart options="easypiechart3.options" percent="easypiechart3.percent" class="easypiechart">
                                <span class="pie-percent" ng-bind="easypiechart3.percent"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>


    <section class="row ui-section" data-ng-controller="SparklineCtrl">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Sparkline Charts</h2>
        </div>
        <div class="col-md-12">

            <section class="panel panel-default panel-minimal">
                <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> Mini Chart</div>
                <div class="panel-body">
                    <table class="table table-bordered no-margin">
                        <thead>
                            <tr>
                                <th>Graph</th>
                                <th>Chart Type</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <span data-sparkline
                                    data-data="simpleChart1.data"
                                    data-options="simpleChart1.options"
                                    ></span>
                                </td>
                                <td>Line Charts</td>
                                <td>Default chart type</td>
                            </tr>
                            <tr>
                                <td><span data-sparkline
                                    data-data="simpleChart2.data"
                                    data-options="simpleChart2.options"
                                    ></span></td>
                                    <td>Bar Charts</td>
                                    <td>General chart type</td>
                                </tr>
                                <tr>
                                    <td><span data-sparkline
                                        data-data="simpleChart3.data"
                                        data-options="simpleChart3.options"
                                        ></span></td>
                                        <td>Tristate Charts</td>
                                        <td>Useful for showing win-lose-draw information</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span data-sparkline
                                            data-data="tristateChart1.data"
                                            data-options="tristateChart1.options"
                                            ></span>
                                        </td>
                                        <td>Pie Charts</td>
                                        <td>General chart type</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </section> 

                    <div class="row">
                        <div class="col-md-4">
                            <div class="panel panel-default panel-labeled">
                                <div class="panel-body">
                                    <div data-sparkline
                                         data-data="largeChart1.data"
                                         data-options="largeChart1.options"
                                    ></div>
                                    <span class="panel-label">Line Charts</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default panel-labeled">
                                <div class="panel-body text-center">
                                    <div data-sparkline
                                         data-data="largeChart2.data"
                                         data-options="largeChart2.options"
                                    ></div>
                                    <span class="panel-label">Bar Charts</span>
                                </div>
                            </div>            
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default panel-labeled">
                                <div class="panel-body text-center">
                                    <div data-sparkline
                                         data-data="largeChart3.data"
                                         data-options="largeChart3.options"
                                    ></div>
                                    <span class="panel-label">Pie Charts</span>
                                </div>
                            </div>            
                        </div>
                    </div>

                </div>
            </section>

        </div>
